<template>
  <div
    :class="wrpCls"
    class="right-content"
    style="width: auto"
  >
    <avatar-dropdown
      :menu="showMenu"
      :current-user="currentUser"
      :class="prefixCls"
    />
    <select-lang :class="prefixCls" :color="color"/>
  </div>
</template>

<script>
import AvatarDropdown from "./AvatarDropdownAdmin";
import SelectLang from "@/components/SelectLang";
import { USER_INFO } from "@/store/mutation-types";
import storage from "store";

export default {
  name: "RightContent",
  components: {
    AvatarDropdown,
    SelectLang,
  },
  props: {
    prefixCls: {
      type: String,
      default: "ant-pro-global-header-index-action",
    },
    isMobile: {
      type: Boolean,
      default: () => false,
    },
    topMenu: {
      type: Boolean,
      required: true,
    },
    theme: {
      type: String,
      required: true,
    },
		color:{
      type: String,
      required: true,
		
    },
  },
  data() {
    return {
      showMenu: true,
      currentUser: {},
      shop: {},
    };
  },
  computed: {
    wrpCls() {
      return {
        "ant-pro-global-header-index-right": true,
        [`ant-pro-global-header-index-${
          this.isMobile || !this.topMenu ? "light" : this.theme
        }`]: true,
      };
    },
  },
  mounted() {
    this.getUserInfo();
  },
  methods: {
    getUserInfo() {
      try {
        let userinfo = storage.get(USER_INFO);
        this.currentUser = userinfo;
      } catch (e) {}
    },
  },
};
</script>

<style lang="less" scoped>
.right-content {
  display: flex;
  align-items: center;
  justify-content: center;
}

.line {
  display: inline-block;
  height: 20px;
  width: 1px;
  background: #b8dcf3;
  margin: 0 10px;
}
</style>
